---
title: Repository Architecture
description: This document provides a detailed overview of our repository structure, architecture, and development workflow.
---

# Tech Stack

Liam is built using a modern JavaScript/TypeScript stack with a focus on React and Next.js. Here's an overview of our technology stack:

## Core Technologies
- **TypeScript**: Strongly-typed programming language that builds on JavaScript
- **React 18**: UI library for building component-based interfaces
- **Next.js 15**: React framework for server-rendered applications
- **Vite**: Build tool used in CLI for static site generation
- **Trigger.dev**: Framework for running background jobs and workflows

## Frontend
- **UI Components**: Custom component library with Radix UI primitives
- **Styling**: CSS Modules with typed definitions
- **Icons**: Lucide React for consistent iconography
- **State Management**: Valtio for state management
- **Visualization**: @xyflow/react (React Flow) for diagram visualization
- **Documentation**: Fumadocs for documentation site

## Database Schema Parsing
- **Parsers**: Support for multiple database schema formats
- **Validation**: Valibot for schema validation

## Development Tools
- **Package Management**: pnpm for efficient dependency management
- **Monorepo Management**: pnpm workspaces
- **Build System**: Turborepo for optimized builds
- **Linting & Formatting**: Biome for code quality
- **Testing**: Vitest for unit testing, Playwright for e2e testing

## Deployment
- **Web Applications**: Deployed with Vercel
- **Background Jobs**: Deployed with Trigger.dev
- **CI/CD**: GitHub Actions for continuous integration

## Overview

Our project uses a monorepo structure managed with pnpm workspaces, allowing us to maintain multiple packages and applications in a single repository while sharing dependencies and code.

## Repository Structure

```text
/
├── frontend/
│   ├── apps/
│   │   ├── docs/              # Documentation site (@liam-hq/docs)
│   │   │   ├── content/       # MDX documentation files
│   │   │   └── app/            # Next.js app router
│   │   │   └── components/          # Documentation site components
│   │   └── app/          # Main web application (@liam-hq/app)
│   │       ├── app/      # Next.js app router
│   │      └── components/
│   │       └── public/       # Static assets
│   └── packages/
│       ├── cli/              # Command-line tool (@liam-hq/cli)
│       │   ├── src/
│       │   └── package.json
│       ├── configs/          # Shared configurations (@liam-hq/configs)
│       │   ├── biome/
│       │   ├── tsconfig/
│       │   └── package.json
│       ├── schema/          # Schema parser (@liam-hq/schema)
│       │   ├── src/
│       │   │   ├── parser/
│       │   │   └── utils/
│       │   └── package.json
│       ├── github/          # GitHub API integration (@liam-hq/github)
│       │   ├── src/
│       │   │   ├── api.browser.ts   # Browser-side GitHub API
│       │   │   ├── api.server.ts    # Server-side GitHub API
│       │   │   └── types.ts         # GitHub related types
│       │   └── package.json
│       ├── erd-core/         # Core ERD functionality (@liam-hq/erd-core)
│       │   ├── src/
│       │   │   ├── components/
│       │   │   ├── hooks/
│       │   │   └── utils/
│       │   └── package.json
│       └── ui/               # UI component library (@liam-hq/ui)
│           ├── src/
│           │   ├── components/
│           │   └── styles/
│           └── package.json
└── package.json             # Root package (liam-frontend)
```

## Packages

This section describes the main responsibilities and relationships between packages in our monorepo. Each package is designed to be modular and focused on specific functionality.

### Web Application (`@liam-hq/app`)

Next.js App Router based web application for exploring ER diagrams. see: [/docs/web](/docs/web)

**Key Responsibilities:**

- Interactive ERD interface
- Schema file URL parsing
- Server Components optimization

### CLI Package (`@liam-hq/cli`)

Command-line tool for generating static ERD visualization files. see: [/docs/cli](/docs/cli)

**Key Responsibilities:**

- Interactive project setup via `init` command
- Static site generation with Vite

### Schema Package (`@liam-hq/schema`)

Database schema parser supporting multiple formats. see: [/docs/parser/supported-formats](/docs/parser/supported-formats)

**Key Responsibilities:**

- Multiple format parser implementations
- Automatic format detection
- Type-safe schema validation

### GitHub Package (`@liam-hq/github`)

GitHub API integration package primarily designed to support the main web application (`@liam-hq/app`). This package centralizes all GitHub-related operations required for the app's pull request review features.

**Key Responsibilities:**

- GitHub App authentication
- Pull Request operations
- Repository management
- Webhook handling

**Tech Stack:**

- Octokit
- GitHub Apps API
- GitHub REST API

**Current Usage:**
- Exclusively used by `@liam-hq/app` for handling GitHub integrations

### ERD Core Package (`@liam-hq/erd-core`)

React Flow based ERD visualization components and logic. see: [/docs/ui-features](/docs/ui-features)

**Key Responsibilities:**

- ERD Visualization
- UI Components
- State Management

### UI Package (`@liam-hq/ui`)

Base UI component library.

**Key Responsibilities:**

- Reusable components
- Design systems

**Tech Stack:**

- CSS Modules
- Radix UI
- Lucide Icons

### Documentation Site (`frontend/apps/docs`)

Built with [Fumadocs](https://fumadocs.vercel.app/).

**Key Responsibilities:**

- User documentation
- Contribution guides

### Development Tools

- **Linting & Formatting**: Biome
- **Testing**: Vitest
- **Build Tool**: Turborepo
